<template>
  <view class="container">
    <!-- 顶部的分类选项 -->
    <view class="tabs">
      <u-tabs v-model="activeTab" :list="tabsList"></u-tabs>
    </view>
	<!-- 视频方块 -->
	<!-- 点击进入到视频界面 -->
    <view class="video-grid">
      <view v-for="(video, index) in videos" :key="index" class="video-card" @click="navigateToDetail(video)">
        <view class="video-thumbnail">
          <image :src="video.thumbnail" mode="aspectFill" class="thumbnail"></image>
          <view class="play-icon">
            <u-icon name="play-circle" size="50" color="#fff"></u-icon>
          </view>
        </view>
        <view class="video-title">{{ video.title }}</view>
      </view>
    </view>

  </view>
</template>

<script setup>
import { ref } from 'vue'
// 选项下划线
const activeTab = ref(0)
// 假数据
const tabsList = [
  { name: '全部' },
  { name: '球机监控' },
  { name: '枪机监控' },
  { name: '养殖区' },
  { name: '蔬菜区' },
]
// 视频假数据
const videos = ref([
  { title: 'ceshi', thumbnail: 'https://example.com/thumbnail1.jpg' },
  { title: '坤典演示设备', thumbnail: 'https://example.com/thumbnail2.jpg' },
  { title: '23倍监控球机', thumbnail: 'https://example.com/thumbnail3.jpg' },
  { title: '认养菜地', thumbnail: 'https://example.com/thumbnail4.jpg' },
  { title: '寿永鱼塘球机', thumbnail: 'https://example.com/thumbnail5.jpg' },
  { title: '养鸡场', thumbnail: 'https://example.com/thumbnail6.jpg' },
])


	// 进入到视频界面
const navigateToDetail = (video) => {
  wx.redirectTo({
    url: `/pages/monitor/Detail?videoUrl=${encodeURIComponent(video.thumbnail)}&title=${encodeURIComponent(video.title)}`,
    fail: (err) => {
      console.error('Failed to navigate:', err)
    },
  })
}
// const onGridIconClick = () => {
//   console.log('Grid icon clicked')
// }
</script>

<style scoped>
.container {
	
  padding: 20rpx;
}

.tabs {
  margin-bottom: 20rpx;
}

.sort-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10rpx 0;
  border-bottom: 1px solid #ebebeb;
}

.grid-icon {
  padding: 10rpx;
}
.video-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.video-card {
  width: 48%;
  background-color: #fff;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  margin-bottom: 20rpx;
}

.video-thumbnail {
  position: relative;
  width: 100%;
  height: 70px;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
  overflow: hidden;
  border-top-left-radius: 10rpx;
  border-top-right-radius: 10rpx;
  /* background: #55aaff; */
}

.thumbnail {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.video-title {
  padding: 10rpx;
  font-size: 28rpx;
  text-align: center;
}
</style>